<template>
    
<div class="comment_componet">
	
     <h4>发表评论</h4>
    <hr>
    <textarea placeholder="输入评论内容" name="comment" id="" cols="5" rows="3" maxlength="120" v-model="newComment"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
    <div class="comment_content">
        <ul>
            <span  v-for="(item , index ) in comment" :key="index">
            <li>
                <span>第{{index+1}}楼 </span>
                <span>用户：{{item.user_name}}</span>
                <span>发表时间：{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
            </li>
            <li>
                <span>{{(item.content == 'undefined') ?'此用户默认好评!':item.content}}</span>
            </li>
            </span>

        </ul>
    </div>
    <mt-button type="danger" size="large" plain style="margin-top:5px;" @click="getMoreComment">加载更多</mt-button>


</div>
</template>
<script>
import axios from 'axios';
import {Toast} from 'mint-ui'

export default {
    name:"comment",
    data(){
        return{
            pageIndex:1,
            newComment:'',
            comment:[]
        }
    },
    
    props:[
        'id'
    ],
    methods:{
        getComment(){
            axios.get('http://www.liulongbin.top:3005/api/getcomments/'+ this.id+ '?pageindex='+this.pageIndex)
            .then(response=>{
                // console.log(response.data.message);
                // this.comment=response.data.message;
                //concat  拼接
                this.comment= this.comment.concat(response.data.message);
                Toast({
                    message:'评论获取成功',
                    duration:500
                })
                // console.log(response);
            })
             .catch(error=>{
                console.log(error);
                Toast({
                    message:'评论获取失败'+ error,
                    duration:500
                })
            })

        },
        getMoreComment(){
            this.pageIndex++;
            this.getComment();

        },
        postComment(){
            if(this.newComment.trim()==""){
                return Toast({
                    message:'评论内容不能为空',
                    duration:500,
                    position:"bottom"
                })
            }else{
               
              
                var obj=this.$qs.stringify({
                    'content':this.newComment.trim()
                })

                this.$axios.post('api/postcomment/'+ this.id, {content:this.newComment.trim()})
                .then(response=>{
                    // console.log("postComment():"+ response);
                    Toast({
                        message:'发表成功！',
                        duration:500,
                        position:"bottom"
                    })
                    this.comment.unshift({
                        add_time:new Date(),
                        content:this.newComment,
                        user_name:'匿名用户'
                    });//手动拼接到评论数组的第一个中
                    this.newComment='';
                })
                .catch(error=>{
                    Toast({
                        message:'提交失败！'+ error,
                        duration:1000
                    })
                })

            }
        }
    },
    created() {
        // console.log("comment id"+ this.id);
        this.getComment();
    }

}
</script>
<style lang="scss">
.comment_componet{
    .comment_content{
        margin: 0;
        padding: 0;

    }
    ul{
        margin: 0px;
        padding: 0%;
    }
    li{
        list-style-type: none;
        list-style: none;
        margin: 0;
    }
    li:nth-of-type(odd){
        background-color: lightgray;
        width: 100%;
        height: 25px;
        padding: 3px;
        font-size: 8px;
        border-radius: 3px;
    }
    li:nth-of-type(even){

        width: 100%;
        height: 25px;
        padding: 3px;
        font-size: 10px;
    }
}
</style>